<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="../css/pageStyle.css" rel="stylesheet" />
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>

  <script id="source" type="module">

    import { signalTestComplete } from "../lib/utils.js";

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {
        LinearEncoding,
        sRGBEncoding,
        Viewer,
        Mesh,
        loadOBJGeometry,
        ReadableGeometry,
        MetallicMaterial,
        Texture,
        DirLight,
        LightMap,
        ReflectionMap
    } from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas"
    });

    new ReflectionMap(viewer.scene, {
        src: [
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PX.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NX.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PY.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NY.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PZ.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NZ.png"
        ],
        encoding: sRGBEncoding
    });

    new LightMap(viewer.scene, {
        src: [
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PX.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NX.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PY.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NY.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PZ.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NZ.png"
        ],
        encoding: sRGBEncoding
    });

    viewer.scene.camera.eye = [0.57, 1.37, 1.14];
    viewer.scene.camera.look = [0.04, 0.58, 0.00];
    viewer.scene.camera.up = [-0.22, 0.84, -0.48];

    viewer.scene.gammaOutput = true;
    viewer.scene.gammaFactor = 2.0;

    viewer.scene.clearLights();

    new DirLight(viewer.scene, {
        dir: [0.8, -0.6, -0.8],
        color: [1.0, 1.0, 1.0],
        intensity: 1.0,
        space: "view"
    });

    new DirLight(viewer.scene, {
        dir: [-0.8, -0.4, -0.4],
        color: [1.0, 1.0, 1.0],
        intensity: 1.0,
        space: "view"
    });

    new DirLight(viewer.scene, {
        dir: [0.2, -0.8, 0.8],
        color: [1.0, 1.0, 1.0],
        intensity: 1.0,
        space: "view"
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with torus shape
    //------------------------------------------------------------------------------------------------------------------

    loadOBJGeometry(viewer.scene, {
        src: "../../assets/models/obj/fireHydrant/FireHydrantMesh.obj"
    })
    .then(function (geometry) {

        // Success

        new Mesh(viewer.scene, {

            geometry: new ReadableGeometry(viewer.scene, geometry),

            material: new MetallicMaterial(viewer.scene, {

                baseColor: [1, 1, 1],
                metallic: 1.0,
                roughness: 1.0,

                baseColorMap: new Texture(viewer.scene, {
                    src: "../../assets/models/obj/fireHydrant/fire_hydrant_Base_Color.png",
                    encoding: sRGBEncoding
                }),
                normalMap: new Texture(viewer.scene, {
                    src: "../../assets/models/obj/fireHydrant/fire_hydrant_Normal_OpenGL.png"
                }),
                roughnessMap: new Texture(viewer.scene, {
                    src: "../../assets/models/obj/fireHydrant/fire_hydrant_Roughness.png"
                }),
                metallicMap: new Texture(viewer.scene, {
                    src: "../../assets/models/obj/fireHydrant/fire_hydrant_Metallic.png"
                }),
                occlusionMap: new Texture(viewer.scene, {
                    src: "../../assets/models/obj/fireHydrant/fire_hydrant_Mixed_AO.png"
                }),

                specularF0: 0.7
            })
        });
    },
          function () {
              // Error
          });

    signalTestComplete(viewer);

  </script>
</html>
